<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>地图数据可视化</title>

    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./fonts/icomoon.css">
</head>

<body>
    <!-- <div id="boxMap"/> -->
    <div class="viewport" id="app">
        <div class="column">
            <div class="overview panel">
                <div class="inner">
                    <div class="item">
                        <h4>23</h4>
                        <span>
                            <i class="icon-dot" style="color: #006cff"></i>
                            机房
                        </span>
                    </div>
                    <div class="item">
                        <h4>41</h4>
                        <span>
                            <i class="icon-dot" style="color: #6acca3"></i>
                            配线架
                        </span>
                    </div>
                    <div class="item">
                        <h4>48</h4>
                        <span>
                            <i class="icon-dot" style="color: #ff00ff"></i>
                            端口
                        </span>
                    </div>
                    <div class="item">
                        <h4>20</h4>
                        <span>
                            <i class="icon-dot" style="color: #00ebff"></i>
                            光缆段
                        </span>
                    </div>
                    <div class="item">
                        <h4>900</h4>
                        <span>
                            <i class="icon-dot" style="color: #ed3f35"></i>
                            纤芯
                        </span>
                    </div>
                </div>
            </div>
            <!--监控-->
            <div class="monitor panel">
                <div class="inner">
                    <div class="tabs">
                        <a href="javascript:;" data-index="0" class="active">告警实时信息</a>
                        <a href="javascript:;" data-index="1">离线设备监控</a>
                    </div>
                    <div class="content" style="display: block;">
                        <div class="head">
                            <span class="col">告警时间</span>
                            <span class="col">告警信息</span>
                            <span class="col">告警级别</span>
                        </div>
                        <div class="marquee-view">
                            <div class="marquee">
                                <div class="row">
                                    <span class="col" id="alertDate">2023-7-13 09:38:00</span>
                                    <span class="col" id="alertContent">断纤告警！鹤壁南-鹤壁服务区光缆故障</span>
                                    <span class="col" id="alertLevel">紧急</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col" id="alertDate">2023-7-13 09:38:00</span>
                                    <span class="col" id="alertContent">断纤告警！鹤壁南-鹤壁服务区光缆故障</span>
                                    <span class="col" id="alertLevel">紧急</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col" id="alertDate">2023-7-13 09:38:00</span>
                                    <span class="col" id="alertContent">断纤告警！鹤壁南-鹤壁服务区光缆故障</span>
                                    <span class="col" id="alertLevel">紧急</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col" id="alertDate">2023-7-13 09:38:00</span>
                                    <span class="col" id="alertContent">断纤告警！鹤壁南-鹤壁服务区光缆故障</span>
                                    <span class="col" id="alertLevel">紧急</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col" id="alertDate">2023-7-13 09:38:00</span>
                                    <span class="col" id="alertContent">断纤告警！鹤壁南-鹤壁服务区光缆故障</span>
                                    <span class="col" id="alertLevel">紧急</span>
                                    <span class="icon-dot"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="content">
                        <div class="head">
                            <span class="col">离线时间</span>
                            <span class="col">设备IP</span>
                            <span class="col">告警级别</span>
                        </div>
                        <div class="marquee-view">
                            <div class="marquee">
                                <div class="row">
                                    <span class="col">20190701</span>
                                    <span class="col">192.168.35.2</span>
                                    <span class="col">重要</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">20190701</span>
                                    <span class="col">192.168.35.2</span>
                                    <span class="col">重要</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">20190701</span>
                                    <span class="col">192.168.35.2</span>
                                    <span class="col">重要</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">20190701</span>
                                    <span class="col">192.168.35.2</span>
                                    <span class="col">重要</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">20190701</span>
                                    <span class="col">192.168.35.2</span>
                                    <span class="col">重要</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">20190701</span>
                                    <span class="col">192.168.35.2</span>
                                    <span class="col">重要</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">20190701</span>
                                    <span class="col">192.168.35.2</span>
                                    <span class="col">重要</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">20190701</span>
                                    <span class="col">192.168.35.2</span>
                                    <span class="col">重要</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">20190701</span>
                                    <span class="col">192.168.35.2</span>
                                    <span class="col">重要</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">20190701</span>
                                    <span class="col">192.168.35.2</span>
                                    <span class="col">重要</span>
                                    <span class="icon-dot"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--点位-->
            <div class="point panel">
                <div class="inner">
                    <h3>告警分布统计</h3>
                    <div class="chart">
                        <div class="pie"></div>
                        <div class="data">
                            <div class="item">
                                <h4>3200</h4>
                                <span>
                                    <i class="icon-dot" style="color: #ed3f35"></i>
                                    告警总数
                                </span>
                            </div>
                            <div class="item">
                                <h4>418</h4>
                                <span>
                                    <i class="icon-dot" style="color: #eacf19"></i>
                                    本月新增
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="column">
            <!-- 地图 -->
            <div class="map">
                <h3>
                    <span class="icon-cube"></span>
                    河南高速地图
                </h3>
                <div class="chart">
                    <div class="geo" id="boxMap"></div>
                </div>
            </div>
            <!-- 用户 -->
            <div class="users panel">
                <div class="inner">
                    <h3>配线架可用端口数统计</h3>
                    <div class="chart">
                        <div class="bar"></div>
                        <div class="data">
                            <div class="item">
                                <h4>2000</h4>
                                <span>
                                    <i class="icon-dot" style="color: #ed3f35"></i>
                                    端口数总量
                                </span>
                            </div>
                            <div class="item">
                                <h4>20</h4>
                                <span>
                                    <i class="icon-dot" style="color: #eacf19"></i>
                                    本月新增
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="column">
            <div class="order panel">
                <div class="inner">
                    <!-- 筛选 -->
                    <div class="filter">
                        <a href="javascript:;" data-key="day365" class="active">365天</a>
                        <a href="javascript:;" data-key="day90">90天</a>
                        <a href="javascript:;" data-key="day30">30天</a>
                        <a href="javascript:;" data-key="day1">24小时</a>
                    </div>
                    <!-- 数据 -->
                    <div class="data">
                        <div class="item">
                            <h4>2000</h4>
                            <span>
                                <i class="icon-dot" style="color: #ed3f35;"></i>
                                告警总量
                            </span>
                        </div>
                        <div class="item">
                            <h4>50%</h4>
                            <span>
                                <i class="icon-dot" style="color: #eacf19;"></i>
                                告警处理完成率
                            </span>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 销售额 -->
            <div class="sales panel">
                <div class="inner">
                    <div class="caption">
                        <h3>利用率历史曲线</h3>
                        <a href="javascript:;" class="active" data-type="year">年</a>
                        <a href="javascript:;" data-type="quarter">季</a>
                        <a href="javascript:;" data-type="month">月</a>
                        <a href="javascript:;" data-type="week">周</a>
                    </div>
                    <div class="chart">
                        <div class="label">单位:百分比%</div>
                        <div class="line"></div>
                    </div>
                </div>
            </div>
            <!-- 渠道 季度 -->
            <div class="wrap">
                <div class="channel panel">
                    <div class="inner">
                        <h3>纤芯质量统计</h3>
                        <div class="data">
                            <div class="item">
                                <h4>39 <small>%</small></h4>
                                <span>
                                    <i class="icon-plane"></i>
                                    质量优
                                </span>
                            </div>
                            <div class="item">
                                <h4>28 <small>%</small></h4>
                                <span>
                                    <i class="icon-bag"></i>
                                    质量正常
                                </span>
                            </div>
                        </div>
                        <div class="data">
                            <div class="item">
                                <h4>20 <small>%</small></h4>
                                <span>
                                    <i class="icon-train"></i>
                                    质量差
                                </span>
                            </div>
                            <div class="item">
                                <h4>13 <small>%</small></h4>
                                <span>
                                    <i class="icon-bus"></i>
                                    不可用
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="quarter panel">
                    <div class="inner">
                        <h3>缆段光纤利用率</h3>
                        <div class="chart">
                            <div class="box">
                                <div class="gauge"></div>
                                <div class="label">75<small> %</small></div>
                            </div>
                            <div class="data">
                                <div class="item">
                                    <h4>1,321</h4>
                                    <span>
                                        <i class="icon-dot" style="color: #6acca3"></i>
                                        缆段总数
                                    </span>
                                </div>
                                <div class="item">
                                    <h4>150%</h4>
                                    <span>
                                        <i class="icon-dot" style="color: #ed3f35"></i>
                                        同比增长
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 排行榜 -->
            <div class="top panel">
                <div class="inner">
                    <div class="all">
                        <h3>缆段光纤利用率TOP3</h3>
                        <ul>
                            <li>
                                <i class="icon-cup1" style="color: #d93f36;"></i>
                                郑州 67.8%
                            </li>
                            <li>
                                <i class="icon-cup2" style="color: #68d8fe;"></i>
                                洛阳 36.5%
                            </li>
                            <li>
                                <i class="icon-cup3" style="color: #4c9bfd;"></i>
                                南阳 30.8%
                            </li>
                        </ul>
                    </div>
                    <div class="province">
                        <h3>TOP5 <i class="date">// 近半年 //</i></h3>
                        <div class="data">
                            <ul class="sup">
                                <li>
                                    <span>郑州</span>
                                    <span>67.8%<s class="icon-up"></s></span>
                                </li>
                                <li>
                                    <span>洛阳</span>
                                    <span>36.8% <s class="icon-up"></s></span>
                                </li>
                                <li>
                                    <span>南阳</span>
                                    <span>30.8% <s class="icon-up"></s></span>
                                </li>
                                <li>
                                    <span>信阳</span>
                                    <span>18.5% <s class="icon-down"></s></span>
                                </li>
                                <li>
                                    <span>商丘</span>
                                    <span>10.8% <s class="icon-up"></s></span>
                                </li>
                            </ul>
                            <ul class="sub">
                                <!-- <li><span>数据</span><span> 数据<s class="icon-up"></s></span></li> -->
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="map_dialog">
        <span class="close-btn">&times;</span>
        <h3>K485+90</h3>
        <div class="top">
            <div class="img">
                <img src="./images/pointPic.png" alt="">
            </div>
            <div class="steps">
                <div class="step">
                    <div class="icon">
                        <div class="point used"></div>
                    </div>
                    <div class="detail">
                        <span class="num">1</span>
                        <span class="state">自用</span>
                    </div>
                </div>
                <div class="step">
                    <div class="icon">
                        <div class="point used"></div>
                    </div>
                    <div class="detail">
                        <span class="num">2</span>
                        <span class="state">自用</span>
                    </div>
                </div>
                <div class="step">
                    <div class="icon">
                        <div class="point lease"></div>
                    </div>
                    <div class="detail">
                        <span class="num">3</span>
                        <span class="state">出租</span>
                    </div>
                </div>
                <div class="step">
                    <div class="icon">
                        <div class="point lease"></div>
                    </div>
                    <div class="detail">
                        <span class="num">4</span>
                        <span class="state">出租</span>
                    </div>
                </div>
                <div class="step">
                    <div class="icon">
                        <div class="point lease"></div>
                    </div>
                    <div class="detail">
                        <span class="num">5</span>
                        <span class="state">出租</span>
                    </div>
                </div>
                <div class="step">
                    <div class="icon">
                        <div class="point space"></div>
                    </div>
                    <div class="detail">
                        <span class="num">6</span>
                        <span class="state">空闲</span>
                    </div>
                </div>
                <div class="step">
                    <div class="icon">
                        <div class="point space"></div>
                    </div>
                    <div class="detail">
                        <span class="num">7</span>
                        <span class="state">空闲</span>
                    </div>
                </div>
                <div class="step">
                    <div class="icon">
                        <div class="point space"></div>
                    </div>
                    <div class="detail">
                        <span class="num">8</span>
                        <span class="state">空闲</span>
                    </div>
                </div>
                <div class="step">
                    <div class="icon">
                        <div class="point space"></div>
                    </div>
                    <div class="detail">
                        <span class="num">9</span>
                        <span class="state">空闲</span>
                    </div>
                </div>
                <div class="step">
                    <div class="icon">
                        <div class="point space"></div>
                    </div>
                    <div class="detail">
                        <span class="num">10</span>
                        <span class="state">空闲</span>
                    </div>
                </div>
                <div class="step">
                    <div class="icon">
                        <div class="point space"></div>
                    </div>
                    <div class="detail">
                        <span class="num">11</span>
                        <span class="state">空闲</span>
                    </div>
                </div>
                <div class="step">
                    <div class="icon">
                        <div class="point space"></div>
                    </div>
                    <div class="detail">
                        <span class="num">12</span>
                        <span class="state">空闲</span>
                    </div>
                </div>
            </div>
        </div>

        <div class="dialog_bottom">
            <div class="base_data">
                <p>经度：<span>114.33756884679124</span></p>
                <p>备用纤芯：<span>0个</span></p>
                <p>纤芯利用率：<span>100%</span></p>
                <p>光缆类型：<span>OPGW</span></p>
                <p>温度：<span>18摄氏度</span></p>
                <p>风力：<span>小于3级</span></p>
            </div>
            <div class="pipe_data">
                <p>纬度：<span>34.84435271219267</span></p>
                <p>在用纤芯：<span>12个</span></p>
                <p>告警：<span>0个</span></p>
                <p>布线类型：<span>123</span></p>
                <p>湿度：<span>91</span></p>
                <p>风向：<span>北</span></p>
            </div>
        </div>
    </div>
</body>

<script type="text/javascript">
    window._AMapSecurityConfig = {
        securityJsCode: '1f4f8f31b4a34f2f6edb1c7881150b0e',
    }
</script>
<script type="text/javascript"
    src="https://webapi.amap.com/maps?v=2.0&key=7af7f143a26fbaedad09092584262b50&plugin=AMap.DistrictSearch,AMap.PolylineEditor,AMap.Adaptor"></script>
<script type="text/javascript" src="./js/jquery.min.js"></script>
<script type="text/javascript" src="./js/echarts.min.js"></script>
<script type="text/javascript" src="./js/index.js"></script>
<script type="text/javascript" src="./js/route.js"></script>
<script type="text/javascript" src="./js/points.js"></script>

<script>
    // let vm = new Vue({
    //     el: '#app',
    //     data() {
    //         return {
    //             map:'',
    //             mask1:'',
    //             polylines:[],
    //             markers:[],
    //             showMapDialog:false,
    //             companyPoint:[
    //                 ['三门峡', [111.19, 34.76], 242],
    //                 ['洛阳', [112.4, 34.67], 342],
    //                 ['郑州', [113.65, 34.73], 322],
    //                 ['开封', [114.35, 34.78], 223],
    //                 ['商丘', [115.65, 34.44], 221],
    //                 ['南阳', [], 365],
    //                 ['漯河', [], 457],
    //                 ['许昌', [], 345],
    //                 ['平顶山', [], 222],
    //                 ['周口', [], 275],
    //                 ['驻马店', [], 221],
    //                 ['新乡', [], 154],
    //                 ['鹤壁', [], 366],
    //                 ['焦作', [], 521],
    //                 ['濮阳', [], 124],
    //                 ['安阳', [], 634],
    //                 ['信阳', [], 245],
    //                 ['济源', [], 246]]
    //         }
    //     },
    //     mounted() {
    //         this.setMap()
    //     },
    //     methods:{
    //         setMap(){
    //             var opts = {
    //                 subdistrict: 0, // 获取边界不需要返回下级行政区
    //                 extensions: "all", // 返回行政区边界坐标组等具体信息
    //                 level: "province" // 查询行政级别为 市
    //             }
    //             var district = new AMap.DistrictSearch(opts);
    //             district.search('河南省', (status, result) => {
    //                 var bounds = result.districtList[0]['boundaries']
    //                     //实例化地图
    //                     this.map = new window.AMap.Map('boxMap', {
    //                     zoom: 7,                //设置当前显示级别
    //                     expandZoomRange: true,    //开启显示范围设置
    //                     zooms: [3, 20],          //最小显示级别为7，最大显示级别为20
    //                     center: [113.624129, 34.160339],
    //                     // viewMode: '3D',          //这里特别注意，设置为3D则其它地区不显示
    //                     // zoomEnable: true,        //是否可以缩放地图
    //                     // resizeEnable: true,
    //                     mapStyle: "amap://styles/darkblue"
    //                 })
    //                 // 外多边形坐标数组和内多边形坐标数组
    //                 var outer = [
    //                     new AMap.LngLat(-360, 90, true),
    //                     new AMap.LngLat(-360, -90, true),
    //                     new AMap.LngLat(360, -90, true),
    //                     new AMap.LngLat(360, 90, true),
    //                 ]
    //                 var pathArray = [
    //                     outer
    //                 ]

    //                 pathArray.push.apply(pathArray, bounds)
    //                 // 添加遮罩
    //                 var mask = new AMap.Polygon({
    //                     path: pathArray,  // 边界坐标点集合
    //                     fillColor: '#011c2d',  // 填充色
    //                     // strokeColor: '#3078AC',
    //                     fillOpacity: 0.5,      // 填充透明度
    //                     strokeWeight: 3,       // 边框宽度，设为 0 表示没有边框
    //                     zIndex: 1            // 显示优先级，越大越靠上层
    //                 })

    //                 this.map.add(mask)
    //                 let useColor = { name: '三门峡', color: '#99004C' }
    //                 route.forEach((city) => {
    //                     city.forEach((item) => {
    //                         let path = []
    //                         item.forEach((point) => {
    //                         path.push(new AMap.LngLat(point[0], point[1]))
    //                         })
    //                         let polyline = new AMap.Polyline({
    //                             path: path,
    //                             strokeWeight: 5, // 线条宽度，默认为 1
    //                             strokeColor: useColor.color, // 线条颜色
    //                             lineJoin: 'round', // 折线拐点连接处样式
    //                             zIndex: 1001           // 显示优先级，越大越靠上层
    //                         })

    //                         this.map.add(polyline)
    //                         // alert(this.polylines)
    //                         this.polylines.push(polyline)
    //                     })
    //                 })
    //                 this.setMarker()

    //                 for(var i=0;i<this.companyPoint.length;i++){
    //                     this.setLayer(this.companyPoint[i], '#011c2d')
    //                 }
    //             })
    //         },
    //         setMarker(){
    //             let marker
    //             let imageFileName
    //             //   let img =require("");    
    //             markerList.forEach((item) => {
    //                 imageFileName = "./images/location.png"
    //                 if(item[0]=='开封'){
    //                     imageFileName = "./images/alert.png"
    //                 }
    //                 item[1].forEach((poi) => {
    //                     marker = new AMap.Marker({
    //                         map: this.map,
    //                         offset: [0, -31],

    //                         icon: new AMap.Icon({
    //                             image:imageFileName,
    //                             size: new AMap.Size(200, 200),  //图标大小
    //                             imageSize: new AMap.Size(32,32)
    //                         }),
    //                         position: poi
    //                     })
    //                     this.markers.push(marker)
    //                     marker.on('click', this.showInfoA)
    //                 })
    //             })                
    //         },
    //         showInfoA(){
    //             this.showMapDialog=true
    //         },
    //         setLayer(item, fillColorValue){
    //             // alert(item[0])
    //             var options = {
    //                 subdistrict: 0,
    //                 extensions: 'all',
    //                 level: 'city'
    //             }
    //             var district = new window.AMap.DistrictSearch(options)
    //             // 查询区域
    //             district.search(item[0], (status, result) => {
    //                 let bounds1 = result.districtList[0]['boundaries']
    //                 // 添加描边
    //                 this.mask1 = new AMap.Polygon({
    //                     path: bounds1[bounds1.length - 1],  // 边界坐标点集合
    //                     fillColor: fillColorValue,  // 填充色
    //                     // fillColor:'#011c2d',
    //                     // strokeColor: '#3078AC',
    //                     fillOpacity: 0.3,      // 填充透明度
    //                     strokeWeight: 1,       // 边框宽度，设为 0 表示没有边框
    //                     zIndex: 999            // 显示优先级，越大越靠上层
    //                 });
    //                 this.map.add(this.mask1)
    //             })
    //         }
    //     }
    // })

    var map = ''
    var mask1 = ''
    var polylines = []
    var markers = []
    var showMapDialog = false
    var alertInfo = [[
        '2023-7-15', '告成收费站-白坪收费站光缆故障', '紧急']
    ]
    var companyPoint = [
        ['三门峡', [111.19, 34.76], 242],
        ['洛阳', [112.4, 34.67], 342],
        ['郑州', [113.65, 34.73], 322],
        ['开封', [114.35, 34.78], 223],
        ['商丘', [115.65, 34.44], 221],
        ['南阳', [], 365],
        ['漯河', [], 457],
        ['许昌', [], 345],
        ['平顶山', [], 222],
        ['周口', [], 275],
        ['驻马店', [], 221],
        ['新乡', [], 154],
        ['鹤壁', [], 366],
        ['焦作', [], 521],
        ['濮阳', [], 124],
        ['安阳', [], 634],
        ['信阳', [], 245],
        ['济源', [], 246]]

    window.onload = function () {
        //    listener()
        AMap.plugin('AMap.DistrictSearch', function () {
            var opts = {
                subdistrict: 0, // 获取边界不需要返回下级行政区
                extensions: "all", // 返回行政区边界坐标组等具体信息
                level: "province" // 查询行政级别为 市
            };
            var district = new AMap.DistrictSearch(opts);
            district.search('河南省', function (status, result) {
                var bounds = result.districtList[0]['boundaries']
                //实例化地图
                map = new window.AMap.Map('boxMap', {
                    zoom: 7,                //设置当前显示级别
                    expandZoomRange: true,    //开启显示范围设置
                    zooms: [3, 20],          //最小显示级别为7，最大显示级别为20
                    center: [113.624129, 34.160339],
                    // viewMode: '3D',          //这里特别注意，设置为3D则其它地区不显示
                    // zoomEnable: true,        //是否可以缩放地图
                    // resizeEnable: true,
                    mapStyle: "amap://styles/darkblue"
                })
                // 外多边形坐标数组和内多边形坐标数组
                var outer = [
                    new AMap.LngLat(-360, 90, true),
                    new AMap.LngLat(-360, -90, true),
                    new AMap.LngLat(360, -90, true),
                    new AMap.LngLat(360, 90, true),
                ]
                var pathArray = [
                    outer
                ]
                pathArray.push.apply(pathArray, bounds)
                // 添加遮罩
                var mask = new AMap.Polygon({
                    path: pathArray,  // 边界坐标点集合
                    fillColor: '#011c2d',  // 填充色
                    // strokeColor: '#3078AC',
                    fillOpacity: 0.5,      // 填充透明度
                    strokeWeight: 3,       // 边框宽度，设为 0 表示没有边框
                    zIndex: 1            // 显示优先级，越大越靠上层
                })
                // this.setLayer()
                map.add(mask)
                let useColor = { name: '三门峡', color: '#99004C' }
                route.forEach((city) => {
                    city.forEach((item) => {
                        let path = []
                        item.forEach((point) => {
                            path.push(new AMap.LngLat(point[0], point[1]))
                        })
                        let polyline = new AMap.Polyline({
                            path: path,
                            strokeWeight: 5, // 线条宽度，默认为 1
                            strokeColor: useColor.color, // 线条颜色
                            lineJoin: 'round', // 折线拐点连接处样式
                            zIndex: 1001           // 显示优先级，越大越靠上层
                        })
                        this.map.add(polyline)
                        this.polylines.push(polyline)
                    })
                })
                setMarker()
                for (var i = 0; i < companyPoint.length; i++) {
                    this.setLayer(companyPoint[i], '#011c2d')
                }
            })
        })
    }

    function addAlert(alertInfoArr) {
        for (var i = 0; i < alertInfoArr.length; i++) {
            var newArr = alertInfoArr[i]
            var span = document.createElement("span");
            for (var j = 0; j < newArr.length; j++) {
                span.innerHTML = "<span class='col'>" + newArr[j] + "</span>"
            }
        }

    }

    function listener() {
        window.addEventListener('message', (event) => {
            console.log(event.data.type)
            let data = event.data.data;
            console.log(data)
        }, false)
    }

    function setMarker() {
        let marker
        let imageFileName
        //   let img =require("");    
        markerList.forEach((item) => {
            imageFileName = "./images/location.png"
            if (item[0] == '开封') {
                imageFileName = "./images/alert.png"
            }
            item[1].forEach((poi) => {
                marker = new AMap.Marker({
                    map: this.map,
                    offset: [0, -31],

                    icon: new AMap.Icon({
                        image: imageFileName,
                        size: new AMap.Size(200, 200),  //图标大小
                        imageSize: new AMap.Size(32, 32)
                    }),
                    position: poi
                })
                this.markers.push(marker)
                marker.on('click', this.showInfoA)
            })
        })
    }

    function showInfoA() {
        var div = document.querySelector(".map_dialog")
        div.style.display = "block"
    }

    function setLayer(item, fillColorValue) {
        // alert(item[0])
        var options = {
            subdistrict: 0,
            extensions: 'all',
            level: 'city'
        }
        var district = new window.AMap.DistrictSearch(options)
        // 查询区域
        district.search(item[0], (status, result) => {
            let bounds1 = result.districtList[0]['boundaries']
            // 添加描边
            this.mask1 = new AMap.Polygon({
                path: bounds1[bounds1.length - 1],  // 边界坐标点集合
                fillColor: fillColorValue,  // 填充色
                // fillColor:'#011c2d',
                // strokeColor: '#3078AC',
                fillOpacity: 0.3,      // 填充透明度
                strokeWeight: 1,       // 边框宽度，设为 0 表示没有边框
                zIndex: 999            // 显示优先级，越大越靠上层
            });
            this.map.add(this.mask1)
        })
    }

    var closeBtn = document.querySelector(".close-btn")
    closeBtn.onclick = () => {
        var div1 = document.querySelector(".map_dialog")
        div1.style.display = "none"
    }
</script>

</html>